<template>
    <el-form :model="organizationModel" ref="organizationForm" :inline="true" label-width="72px" :label-position="'left'">
      <el-row class="search-title">条件搜索</el-row>
      <el-form-item prop="orgname">
        <el-input v-model="organizationModel.orgname" prefix-icon="el-icon-search" clearable placeholder="单位名称/拼音首字母"></el-input>
      </el-form-item>
      <el-form-item> <el-button class="btn-search" type="primary"  @click="handleQueryOrg(1)">搜索
      </el-button></el-form-item>
      <collapse-vertical>
        <div v-show="isDisplay">
          <div>
            <el-form-item prop="orgbh" label="单位编号">
              <el-input v-model="organizationModel.orgbh" clearable placeholder="请输入单位编号"></el-input>
            </el-form-item>
            <el-form-item prop="parentorgname" label="上级单位">
              <el-input v-model="organizationModel.parentorgname" @click.native="handleSelectDwNameOrg" clearable  readonly
                        placeholder="上级单位"></el-input>
            </el-form-item>
            <el-form-item prop="header" label="负责人">
              <el-input v-model="organizationModel.header" @click.native="handleSelectPerOrg" clearable  readonly
                        placeholder="负责人"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="orglevel" label="机构水平">
              <el-radio-group v-model="organizationModel.orglevel" size="small">
                <el-radio   v-for="(item,ids) in orgLevels" :key="ids" :label="item.id" >{{item.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
            <el-form-item prop="orgtype" label="机构类型">
              <el-radio-group v-model="organizationModel.orgtype" size="small">
                <el-radio   v-for="(item,ids) in orgTypes" :key="ids" :label="item.id" >{{item.value}}</el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item>
            <el-button class="btn-mini-form" @click="handleQueryOrg(1)"
                       size="mini" >提交
            </el-button>
            <el-button class="btn-mini-form" @click="handleResetOrg"
                       size="mini" >重置
            </el-button>
          </el-form-item>
        </div>
      </collapse-vertical>
      <el-row style="text-align: center">
        <el-button style="border: none;background-color: transparent" size="small"
                   @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'">
        </el-button>
      </el-row>

      <person-child-dialog-dw :dialogDwVisible.sync="dialogDwVisibleOrg"   @dwName="selectDwnameOrg" :dwType="dwTypeOrg"></person-child-dialog-dw>
      <person-select-dialog :dialogSelectPerVisible.sync="dialogPerVisibleOrg" @selectPer="selectPerOrg"></person-select-dialog>
  </el-form>
</template>

<script>
  import PersonChildDialogDw from '../personChild/personChildDialogDw'
  import PersonSelectDialog from './personSelectDialog'
  import CollapseVertical from '../../../utils/collapseVertical'

  import { selDictonary } from '@/api/dictionary'
  export default {
    name: 'query-form',
    components: {
      PersonSelectDialog,
      PersonChildDialogDw,
      CollapseVertical
    },
    created() {
      this.initData()
      // this.handleQueryOrg(1)
    },
    data() {
      return {
        dialogDwVisibleOrg: false,
        dialogPerVisibleOrg: false,
        isDisplay: false,
        dwTypeOrg: 0,
        organizationModel: {
          orgbh: '',
          orgname: '',
          orglevel: '',
          parentorg: '', orgtype: '', header: '', parentorgname: ''
        },
        orgTypes: [],
        orgLevels: []
      }
    },
    methods: {
      handleSelectDwNameOrg() {
        this.dialogDwVisibleOrg = true
      },
      handleSelectPerOrg() {
        this.dialogPerVisibleOrg = true
      },
      handleQueryOrg(page) {
        this.$emit('handleQueryOrg', this.organizationModel, page)
      },
      handleResetOrg() {
        this.$refs['organizationForm'].resetFields()
        this.organizationModel.parentorg = ''
        // this.handleQueryOrg(1)
      },
      selectDwnameOrg(val) {
        this.organizationModel.parentorg = val.orgno
        this.organizationModel.parentorgname = val.orgname
      },
      selectPerOrg(val) {
        this.organizationModel.header = val.name
      },
      initData() {
        selDictonary().then(res => {
          for (var item in res) {
            if (res[item].id === 'orgtype') {
              this.orgTypes = res[item].comboboxDetailList
            }
            if (res[item].id === 'orglevel') {
              this.orgLevels = res[item].comboboxDetailList
            }
          }
        })
      },
      isShow() {
        this.isDisplay = !this.isDisplay
      }
    }
  }
</script>

<style scoped>
</style>
